<template>
  <div class="s-word-rotate-wrapper">
    <div class="s-word-rotate-container">
      <div class="s-word-rotate-content">
        <a
          v-for="(item,index) in items"
          :key="index"
          target="_blank"
          :style="{background:activeIndex == index ? activeBg : 'transparent',opacity:item.opacity,left:item.left + 'px',top:item.top + 'px','font-size':item.fsize + 'px','z-index':item.z,color:item.color}"
          @mouseenter="clearRotate(index)"
          @mouseleave="intervalWords"
          @click="clickItem(item)"
        >{{item.label}}</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SWordRotate',
  props: {
    //悬浮至某个数据项是的背景色
    activeBg: { type: String, default: '#000' },
    //词云容器宽度
    width: { type: null, default: 400 },
    //词云容器高度
    height: { type: null, default: 400 },
   //词云数据集
    data: {      type: Array, default: function () {
        return [];
      }    },
    //词云数据项显示的颜色集
    colorLists: {      type: Array, default: function () {
        return ['#4192d6', '#c8c3f1', '#8dc9b0', '#71c3f0', '#f88', '#d674ff'];
      }    },
  },
  data: function () {
    return {
      items: [],
      timer: null,
      ctWidth: 0,
      ctHeight: 0,
      activeIndex: null,
      isInit: false
    }
  },
  watch: {
    data: {
      handler: function (val) {
        this.isInit && this.initItems();
      },
      immediate: true
    },
    width: {
      handler: function (val) {
        val && (this.ctWidth = val);
      },
      immediate: true
    },
    height: {
      handler: function (val) {
        val && (this.ctHeight = val);
      },
      immediate: true
    }
  },
  mounted: function () {
    if (this.ctHeight == 0 && this.ctHeight == 0) {
      this.getCtSize();
    } else {
      this.initItems();
    }
  },
  methods: {
    getCtSize() {
      this.isInit = true;
      let el = document.getElementsByClassName('s-word-rotate-content')[0];
      let w = document.defaultView.getComputedStyle(el, null).width;
      if (w.indexOf('%') != -1) {

      } else {
        this.ctWidth = parseFloat(w);
      }
      let h = document.defaultView.getComputedStyle(el, null).height;
      if (w.indexOf('%') != -1) {

      } else {
        this.ctHeight = parseFloat(h);
      }
      let style = document.defaultView.getComputedStyle(el, null)
      this.initItems();
    },
    initItems() {
      let tmp = [];
      this.data.forEach((d, i) => {
        let obj = {};
        obj = { left: i % 3 * this.ctWidth / 3 + Math.random() * 30, top: i * this.ctHeight / this.data.length + Math.random() * 20, label: d, color: this.colorLists[i % this.colorLists.length] };
        if (i % 2 == 0) {
          obj["up"] = false;  //向下运动
          if (obj.top < 30) {
            obj.fsize = 14;
            obj.opacity = 0.6;
          } else if (obj.top > this.ctHeight - obj.fsize - 30) {
            obj.fsize = 14;
            obj.opacity = 0.6;
          } else {
            obj.fsize = 12;
            obj.opacity = 0.4;
          }
        } else {
          obj["up"] = true;  //向上运动
          if (obj.top < 30) {
            obj.fsize = 14;
            obj.opacity = 0.9;
          } else if (obj.top > this.ctHeight - obj.fsize - 30) {
            obj.fsize = 14;
            obj.opacity = 0.9;
          } else {
            obj.fsize = 16;
            obj.opacity = 1;
          }
        }
        obj.z = obj.fsize;
        tmp.push(obj);
      })
      this.items = tmp;
      this.intervalWords();
    },
    intervalWords() {
      this.activeIndex = null;
      let self = this;
      this.timer = setTimeout(() => {
        self.items.forEach((d) => {
          if (d.up) {  //向上运动
            ((d.top - d.fsize) <= 0 ? (d.top = d.top + 1 + Math.random() * 3, d.up = false) : (d.top = d.top - (1 + Math.random() * 3)));
            if (d.top < 30) {
              d.fsize = 14;
              d.opacity = 0.9;
            } else if (d.top > self.ctHeight - d.fsize - 30) {
              d.fsize = 14;
              d.opacity = 0.9;
            } else {
              d.fsize = 16;
              d.opacity = 1;
            }
          } else {  //向下运动
            ((d.top + d.fsize) >= (self.ctHeight - d.fsize) ? (d.top = d.top - (1 + Math.random() * 3), d.up = true) : (d.top = d.top + (1 + Math.random() * 3)));
            if (d.top < 30) {
              d.fsize = 14;
              d.opacity = 0.6;
            } else if (d.top > self.ctHeight - d.fsize - 30) {
              d.fsize = 14;
              d.opacity = 0.6;
            } else {
              d.fsize = 12;
              d.opacity = 0.4;
            }
          }
          d.z = d.fsize;
        })
        clearTimeout(self.timer);
        self.intervalWords();
      }, 100)
    },
    clearRotate(index) {
      this.timer && clearTimeout(this.timer);
      this.activeIndex = index;
    },
    clickItem(item) {
      this.$emit('active-item', item.label);
    }
  },
  destroyed: function () {
    this.timer && this.clearRotate(this.timer);
  }
}
</script>

<style   rel="stylesheet/scss" lang="scss" scoped>
@import "../../../assets/styles/base_style";
.s-word-rotate-wrapper:after {
  @include clearFloat;
}
.s-word-rotate-wrapper {
  width: 100%;
  height: 100%;
  a,
  a:hover {
    text-decoration: none;
  }
  .s-word-rotate-container {
    width: 100%;
    height: 100%;
    position: relative;
    float: left;
    overflow: hidden;
    .s-word-rotate-content {
      width: 100%;
      height: 100%;
      min-height:300px;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -ms-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
      a {
        position: absolute;
        padding: 2px 5px;
        font-weight: bold;
        min-width: 30px;
        cursor: pointer;
        @include borderRadius(5px);
      }
    }
  }
}
</style>

